/** 
  首页下载图标
*/
<template>
  <div id="box">
    <div class="downBtnBox1">
        <a href="https://www.bigzhuan.com/apk/app-release-0712.apk" v-if="type=='android'" @click="changeIcon">
            <img src="https://www.bigzhuan.com/img/down.png">
        </a>
        <img src="https://www.bigzhuan.com/img/collection.png" v-else @click="changeIcon">
    </div>
    <div class="downBox" v-if="showBox" @click="showBox = false;showWX=false;showIos=false">
        <div class="downbgWX" v-if="showWX"></div>
        <div class="iosSafari" v-if="showIos"></div>
    </div>
  </div>
</template>
<script>
export default {
  components:{

  },
  created(){
    var browser = {
        versions: function() {
            var u = navigator.userAgent,
                app = navigator.appVersion;
            return { //移动终端浏览器版本信息 
                trident: u.indexOf('Trident') > -1, //IE内核
                presto: u.indexOf('Presto') > -1, //opera内核
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
                iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf('iPad') > -1, //是否iPad
                webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
            };
        }(),
        language: (navigator.browserLanguage || navigator.language).toLowerCase()
    }
    if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {
      this.type='ios';
    } else if (browser.versions.android) {
      this.type = 'android';
    }
    this.isWeiXin();
  },
  data(){
    return {
      type:'android',
      collectionIcon:'https://bigzhuan.com/img/collection.png',
      downIcon:'https://bigzhuan.com/img/down.png',
      isWX:false,
      showWX:false,
      showBox:false,
      showIos:false
    }
  },
  methods:{
    isWeiXin(){
      var ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
            this.isWX = true
        } else {
            this.isWX = false;
        }
    },
    changeIcon(){
      if(this.isWX){
          this.showBox = true
          this.showWX = true
      }else{
          if(this.type == 'ios'){
            this.showBox = true
            this.showIos = true
          }
      }
    }
  }
}
</script>
<style lang="less">
@import '../../../style/mixin.less';
  #box{
    .downBtnBox1{
        position: fixed;
        right: 1rem;
        bottom:2rem;
        .bg(#ffffff);
        // box-shadow:2px 2px 10px #aaa;
        img{
            .wh(0.8rem,0.8rem);
        }
    }
    .downBox{
        .wh(100%,18rem);
        .bg(#ffffff);
        position: fixed;
        top: 0;
        z-index: 501;
        .downbgWX{
            .wh(100%,14rem);
            background: url('https://bigzhuan.com/img/AndOrder.jpg') 100% 100% no-repeat;
            background-size: 100%;
        }
        .iosSafari{
            .wh(100%,14rem);
            background: url('https://bigzhuan.com/img/iosSafari.jpg') 100% 100% no-repeat;
            background-size: 100%;
        }
    }
  }

</style>
